<template>
    <div class="bottom-navigation">
        <div class="nav-item" :class="{ 'active': currentRoute === 'home' }" @click="handleClick('home')">
            <van-icon name="wap-home-o" size="30" />
            <span>主页</span>
        </div>
        <div class="nav-item" :class="{ 'active': currentRoute === 'meixianghao' }" @click="handleClick('meixianghao')">
            <van-icon name="user-o" size="30" />
            <span>待扩展</span>
        </div>
        <div v-if="userInfo"  class="nav-item" :class="{ 'active': currentRoute === 'root' }" @click="handleClick('root')">
            <van-icon name="vip-card-o"  size="30"/>
            <span>超级管理</span>
        </div>
        <div class="nav-item" :class="{ 'active': currentRoute === 'user' }" @click="handleClick('user')">
            <van-icon name="user-o" size="30" />
            <span>个人中心</span>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { onMounted ,ref} from 'vue';
import request from '@/utils/request';
import apiUrls from '@/config/apiUrls'; 
const userInfo = ref(false);

const getUserInfo = async ()=>{
    try {
            const response = await request.post(apiUrls.users.getUserInfo);
        if(response.code === 200){
            if(response.data.base_info.dawn_id === 1){
                userInfo.value = true
            }else{
                userInfo.value = false
            }
        }
    } catch (error) {
        console.error('获取用户信息出错：', error);
        userInfo.value = false
    }
}

onMounted(() => {
    console.log("加载导航");
    getUserInfo()
});
const props = defineProps({
    currentRoute: {
        type: String,
        default: 'home'
    }
});

const emits = defineEmits(['navigate']);

const handleClick = (route) => {
    emits('navigate', route);
};
</script>

<style scoped>
/* 根元素字体大小设置，用于后续 rem 单位参照 */
html {
    font-size: 16px; 
}

.bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex ;
    justify-content: space-around;
    background: linear-gradient(to top, #f9f9f9, #ffffff); 
    border-top: 1px solid #e0e0e0;
    padding: 0.625rem 0; 
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); 
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #666666;
    cursor: pointer;
    padding: 0.3125rem 1.125rem; 
    border-radius: 0.75rem; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative;
    overflow: hidden;
}

.nav-item span {
    padding-top: 0.3125rem;
    font-size: 0.875rem; 
    white-space: nowrap;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item:hover::before {
    opacity: 1;
}

.nav-item.active {
    color: #1E9FFF;
    background: linear-gradient(to bottom, #e8f4ff, #d6eaff); 
    transform: scale(1.05); 
    box-shadow: 0 2px 8px rgba(30, 159, 255, 0.2); 
}

.nav-item van-icon {
    margin-bottom: 0.375rem; 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item.active van-icon {
    transform: translateY(-0.1875rem); 
}

/* 媒体查询，当屏幕宽度小于 600px 时调整根元素字体大小 */
@media (max-width: 600px) {
    html {
        font-size: 14px; 
    }
}

/* 当屏幕宽度小于 400px 时进一步调整根元素字体大小 */
@media (max-width: 400px) {
    html {
        font-size: 12px; 
    }
}
</style>    